// Style for the website

// Variables for this sass implementation
$picnic-dropimage-ratio: 4 / 3 !default;

$picnic-grid-sizes: 500 800 1000 1200;
$picnic-grid-children: 1000;
$picnic-grid-off: 500 800;
$picnic-grid-count: one two three four five six;

$picnic-nav-responsive: true;

$picnic-normalize-ie: false;

// Get the icons from fontello
// You need to import this first
@import 'font/fontello';

// Imports the base variable styles
@import '../../src/themes/default/theme';

// Normalize.css (external library)
@import '../../src/picnic';

// // Generic styles for things like <body>, <a> and others
// // It also overwrites normalize.css a bit
// @import '../../src/plugins/generic/plugin';
// // @import '../../src/plugins/fontello/plugin';
//
// // Simple elements
// @import '../../src/plugins/label/plugin';
// @import '../../src/plugins/button/plugin';
//
// // Forms
// @import '../../src/plugins/input/plugin';
// @import '../../src/plugins/select/plugin';
// @import '../../src/plugins/radio/plugin';
// @import '../../src/plugins/checkbox/plugin';
//
// // Components
// //@import '../../src/plugins/table/plugin';
// @import '../../src/plugins/grid/plugin';
//
// // Extra
// @import '../../src/plugins/nav/plugin';
//
// //@import '../../src/plugins/stack/plugin';
// @import '../../src/plugins/card/plugin';
// //@import '../../src/plugins/modal/plugin';
//
// @import '../../src/plugins/dropimage/plugin';
// @import '../../src/plugins/tabs/plugin';
// @import '../../src/plugins/tooltip/plugin';



// Our own plugins, extending some of picnic's
@import 'hero';
@import 'visual';


// Make a title and its text closer together
h1,
h2,
h3,
h4 {
  margin: 0;
  padding: 0;
  line-height: 1;
}


// Structure
html,
body,
main {
  display: block;
  color: #333;
  background: #fff;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 5;
}

// I like allowing scroll past end
main .visual:last-child {
  margin-bottom: 100px;
}

.intro {
  padding: 10px;
  max-width: 960px;
  width: 100%;
  margin: 100px auto 500px;
  }

nav .brand:hover,
nav .brand:active {
  background: none;
  box-shadow: none;
  }



// Display the grid with colors
.flex.demo > * > * {
  display: block;
  padding: .3em 0;
  background: $green;
  text-align: center;
}

.flex.demo > *:nth-child(2n) > * {
  background: $aqua;
}

.test > h2 {
  padding-top: 80px;
  margin-top: -60px;
}

.loading,
.loading * {
  transition: all 0s;
}

section.row {
  width: 90%;
  max-width: 960px;
  margin: 80px auto;
}

section.row aside {
  width: 200px;
}

@media all and (max-width: 500px) {
  .icon-help-circled {
    display: none;
  }
}


pre {
  width: 100%;
}

pre code {
  background: none;
}


comment-box.visual {
  margin-top: 60px;
}


// $browser-color: #ccc;
// $browser-text: #333;
//
// .browser {
//   margin-top: 20px;
//   border: 2px solid $browser-color;
//   border-top: 26px solid $browser-color;
//   border-radius: 5px;
//   width: 100%;
//   height: 0;
//   position: relative;
//   display: block;
//   padding-bottom: 56%;
// }
//
// .browser::before {
//   color: $browser-text;
//   content: attr(data-title);
//   display: block;
//   position: absolute;
//   top: -23px;
//   left: 5px;
//   font-size: 14px;
// }
//
// .browser::after {
//   content: '';
//   display: block;
//   position: absolute;
//   top: -19px;
//   right: 5px;
//   background: #f55;
//   border-radius: 50%;
//   width: 12px;
//   height: 12px;
// }
//
// .browser iframe {
//   border: none;
//   position: absolute;
//   top: 0;
//   left: 0;
//   margin: 0;
//   width: 250%;
//   height: 250%;
//   transform: scale(0.4);
//   transform-origin: 0 0;
//   border-radius: 0 0 5px 5px;
// }
